<template>
  <div class="index-container">
    <div class="main-header">
      <el-row>
        <el-col v-if="type === 9" :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-button
            type="primary"
            icon="el-icon-plus"
            class="sureBtn"
            size="medium"
            @click="handleAdd"
          >
            新增部门
          </el-button>
        </el-col>
      </el-row>
    </div>
    <div class="main-content">
      <el-table
        :data="dataList"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        default-expand-all
        stripe
        :header-cell-style="{ backgroundColor: '#409EFF', color: '#fff' }"
        :tree-props="{children: 'child'}">
        <el-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="item.formatter"
          :filters="item.filters"
          :class-name="item.className"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          width="280"
        >
         <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="editRow(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            size="mini"
            type="success"
            @click="delRow(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="35%"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <el-form
          :key="key"
          ref="formData"
          :model="formData"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
          size="medium"
        >
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="部门归属" prop="name">
                <el-select
                  v-model="formData.type"
                  size="medium"
                  clearable
                  placeholder="请选择部门归属"
                  filterable
                  style="width: 100%;"
                >
                  <el-option :key="0" label="行政部" :value="1"></el-option>
                  <el-option :key="1" label="业务部" :value="2"></el-option>
                  <el-option :key="2" label="运营中心" :value="3"></el-option>
                  <el-option :key="3" label="护理部" :value="4"></el-option>
                </el-select>
                <!-- <el-input v-model="formData.name" placeholder="请选择部门归属"></el-input> -->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="部门名称" prop="name">
                <el-input v-model="formData.name" placeholder="请输入部门名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="上级部门" prop="pid">
                <el-select v-model="formData.pid" placeholder="请选择上级部门" style="width: 100%;">
                  <el-option label="顶层" :value="0"></el-option>
                  <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id" ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row> -->
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="备注" prop="content">
                <el-input v-model="formData.content" type="textarea" placeholder="请输入备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="form-footer">
          <el-button type="primary" class="sureBtn" size="medium" @click="save">
            提 交
          </el-button>
          <el-button
            type="info"
            class="setBtn"
            size="medium"
            @click="cancel('formData')"
          >
            取 消
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { getbranch, getbranchtree } from "@/api/depart";
  import { mapGetters } from "vuex";
  export default {
    name: "Depart",
    data() {
      return {
        key: Math.random(),
        currentSelectedData: [],
        dataList: [],
        selectForm: {
          page_size: 20
        },
        formData: {
          pid: 0
        },
        title: "添加部门",
        dialogVisible: false,
        rules: {
          name: [{ required: true, message: "请输入部门名称", trigger: "blur" }],
          // pid: [{ required: true, message: "请选择上级部门", trigger: "blur" }],
          content: [{ required: true, message: "请输入备注", trigger: "blur" }],
        },
        list: [],
        tableColumns: [
          { prop: "name", label: "部门名称" },
          { prop: "content", label: "备注" },
        ],
      };
    },
    computed: {
      ...mapGetters({
        avatar: "user/avatar",
        username: "user/username",
        name: "user/name",
        type: "user/type",
      }),
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.getTableData();
      getbranch("get",{page_size: 100}).then(res => {
        this.list = res.data?.list;
      })
    },
    methods: {
      save() {
        this.$refs["formData"].validate(async (valid) => {
          if (valid) {
            if (this.formData.id) {
              getbranch("put", this.formData).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "修改成功",
                  });
                  this.getTableData();
                  this.cancel("formData");
                }
              });
            } else {
              getbranch("post", this.formData).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "添加成功",
                  });
                  this.getTableData();
                  this.cancel("formData");
                }
              });
            }
          }
        });
      },
      cancel(formName) {
        this.dialogVisible = false;
        this.formData = {};
        this.$refs[formName].resetFields();
      },
      editRow(row) {
        this.title = "编辑部门";
        this.dialogVisible = true;
        this.formData = row;
        this.key = Math.random();
      },
      delRow(row) {
        this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              getbranch("delete", {
                id: row.id,
              }).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "删除成功!",
                  });
                  this.getTableData();
                }
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
      },
      typeFormatter(row) {
        if (row.type == 9) {
          return "管理员";
        } else if (row.type == 1) {
          return "员工";
        } else if (row.type == 2) {
          return "护工";
        }
      },
      getTableData() {
        getbranchtree("get").then((resp) => {
          if (resp.code === 200) {
            this.dataList = resp.data;
          }
        });
      },
      handleAdd() {
        this.dialogVisible = true;
        this.title = "添加部门"
      },
      closeDialog() {
        this.dialogVisible = false;
        this.$refs["formData"].resetFields();
        this.formData = {};
      },
      search() {
        this.selectForm.page = 1;
        this.getTableData();
      },
    },
  };
</script>
<style lang="scss" scoped>
.el-table {
    ::v-deep {
      td {
        padding: 10px 0 !important;
        font-size: 16px !important;
      }

      th {
        padding: 12px 0 !important;

        .cell {
          font-size: 16px !important;
          color: #fff !important;
        }
      }

      .red-cell div {
        color: #fff;
        background: #f00;
      }

      .green-cell div {
        color: #fff;
        background: green;
      }

      .blue-cell div {
        color: #fff;
        background: rgb(64, 158, 255);
      }

      .yellow-cell div {
        color: #fff;
        background: #ff8000;
      }

      .red-cell-font div {
        color: red;
      }
    }
  }
  .index-container {
    box-sizing: border-box;
    width: 100%;
    padding: 0 30px !important;
    margin: 0 !important;
    background: #fff !important;

    .main-header {
      padding-top: 4px;
      margin-bottom: 24px;

      .search {
        width: 100%;

        .search-title {
          flex: 0 0 48px;
          width: 48px;
          font-size: 16px;
          line-height: 36px;
          color: #333;
        }
      }
    }

    .form-footer {
      padding-left: 100px;
    }
  }
</style>
